<html>
	<head>
		<meta charset="UTF-8">
		<title>threejs-example 6-calculate-position</title>
		<style>
			body { margin: 0; }
      #canvas-container { 
				background-color: gray;
				border:1px solid black;
        width:80vw;	
        height:80vh;
			}
      #mouse-data-container{
				position:absolute;
				color: white;
				background-color: rgba(15, 15, 200, 0.774);
				font-size: 32px;
				font-weight: 600;
				pointer-events: none;
				padding: 15px;
				border-radius: 10px;
			}
		</style>
	</head>
	<body>
    <div style="display: flex;flex-direction: column; font-size: 24px;text-align: center;">
      <div style="height: 10vh;border: 1px solid black;background: burlywood;"> 标题占位</div>
      <div style="display: flex;">
        <div style="width: 10vw;height: 80vh;border: 1px solid black;background: cadetblue;">左侧图表占位</div>
        <div id="canvas-container"></div>
        <div style="width: 10vw;height: 80vh;border: 1px solid black;background: coral;">右侧图表占位</div>
      </div>
      <div style="height: 10vh;border: 1px solid black;background: darkcyan;"> 底部占位</div>
    </div>



    <div id="mouse-data-container">
      <div id="mouse-data">test</div>
      <div id="position-data"></div>
    </div>
    
	</body>
  <script src="./static/js/add-github-icon.js"></script>
</html>